<template>
    <div class="flex_column pd_16 border_box w_100">
        <div class="flex_column">
            <div class="text_2 fs_13 mgb_20">设备控制信息</div>
            <div>
                <div class="shouBox">

                    <div class="flex_row_center">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-act004"></use>
                        </svg>
                        <span>排气扇</span>
                    </div>
                    <div>
                        <el-switch v-model="devicesInfo.fan" active-color="#13ce66" inactive-color="#ff4949"
                            @change="changeFan(devicesInfo.fan)"></el-switch>
                    </div>
                </div>
                <div class="shouBox">
                    <div class="flex_row_center">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-dengguang"></use>
                        </svg>
                        <span>照明灯</span>
                    </div>
                    <div>
                        <el-switch v-model="devicesInfo.light" active-color="#13ce66"
                            inactive-color="#ff4949" @change="changeLight(devicesInfo.light)"></el-switch>
                    </div>
                </div>
            </div>
            <div class="flex_column mgt_32 ">
                <div class="text_2 fs_13 mgb_20">历史记录</div>
                <dance-number :num="totalTicketPrice" :max-length="6" color="#ACCEE0"></dance-number>
                <card class="mgt_24" :width="310" :height="640" type="inner">
                    <div class="over_hidden w_100">
                        <!-- 这里添加历史记录列表 -->
                        <div class="history-list">
                            <transition-group name="list" tag="div" class="history-list-content">
                                <div v-for="item in displayHistory" :key="item.id"
                                    class="history-item">
                                    {{ item.c }}
                                </div>
                            </transition-group>
                        </div>
                    </div>
                </card>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { TicketPriceItem, TicketTypeItem } from "@/model/model";
import { DanceNumber, ZtEchart, Card } from "@ztstory/datav-core";
import { createPieOpts, createPieSeriesItem } from "@ztstory/datav-core/echarts-opts";
import Swiper from "@ztstory/datav-core/src/components/swiper/swiper.vue";
import { computed, ref } from "vue";
import { ElSwitch, ElButton } from "element-plus";
// import { Decoration1 } from '@dataview/datav-vue3';


interface Props {
    ticketPriceList?: TicketPriceItem[];
    ticketTypeList?: TicketTypeItem[];
}
// 历史记录信息
const historyData = ref<{ id: number, c: string }[]>([
    { id: 1, c: "<系统>检测到室内温度增高" },
    { id: 2, c: "<系统>自动开启排气扇" },
    { id: 3, c: "<系统>自动关闭排气扇" },
    { id: 4, c: "<用户>添加定时任务" },
    { id: 5, c: "<系统>开启照明灯" },
    { id: 6, c: "<系统>达到定时时段" },
    { id: 7, c: "<系统>关闭照明灯" },
])

const displayHistory = ref([...historyData.value]);


// 设备开关状态
// {风扇,灯光,}
const devicesInfo = ref({
    fan: false,
    light: false,
});

const props = defineProps<Props>();


let myid = ref(7);
const totalTicketPrice = computed(() => {
    return myid.value;
});
const changeFan = (val: boolean) => {
    myid.value++;
    historyData.value.unshift({ id: myid.value, c: val ? "<用户>开启排气扇" : "<用户>关闭排气扇" });
    if (historyData.value.length > 14) {
        historyData.value.pop(); // 删除末尾记录
    }
    displayHistory.value = [...historyData.value];
    devicesInfo.value.fan = val;
};
const changeLight = (val: boolean) => {
    myid.value++;
    historyData.value.unshift({ id: myid.value, c: val ? "<用户>开启照明灯" : "<用户>关闭照明灯" });
    if (historyData.value.length > 14) {
        historyData.value.pop(); // 删除末尾记录
    }
    displayHistory.value = [...historyData.value];
    devicesInfo.value.light = val;
};

</script>

<style scoped lang="less">
.echart_content {
    width: 100%;
    height: 100%;
}

.echart_content_price {
    width: 50%;
    height: 50%;
    display: flex;
    flex-direction: column;
}

.legend {
    height: 60px;
    font-size: 13px;
    color: @white;

    &_item {
        width: auto;

        &_icon {
            width: 6px;
            height: 6px;
            border-radius: 3px;
        }
    }

    .legend_item:last-child {
        margin-bottom: 0;
    }
}

.shouBox {
    display: flex;
    justify-content: space-between;
    padding: 8px 20px;
}

.icon {
    width: 26px;
    height: 26px;
    margin-right: 10px;
    fill: #03e6db;
}

// 历史记录列表样式
.history-list {
    height: 100%;
    overflow-y: auto;
    padding: 10px;
}

.history-item {
    padding: 8px 12px;
    background-color: rgba(3, 230, 219, 0.1);
    border-left: 3px solid #03e6db;
    margin-bottom: 10px;
    font-size: 18px;
    color: #fff;
    word-break: break-all;
}


.list-move {
  transition: transform 0.5s ease;
}

/* 列表进入和离开时的动画样式 */
.list-enter-active, .list-leave-active {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* 列表进入时的初始样式 */
.list-enter-from {
  opacity: 0;
  transform: translateY(-30px);
}

/* 列表离开时的结束样式 */
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
  /* position: absolute; */
}

// 历史记录列表的滚动条样式
::-webkit-scrollbar {
    width: 0px;
}
</style>
